import { useState } from "react";
import PropTypes, { func } from 'prop-types';
import "@/assets/modal.scss"

function Button(props){
    let {type,children,confirm}=props
    let confirmA =()=>{
        confirm()
    }
    return(
        <div className="ml-button">
            <span className={type} onClick={confirmA} >{children}</span>
        </div>
    )
}
function Modal (props){
    let {title,children,closable,isShow,show,type}= props
    let renderFooter=()=>{
        let btns=[];
        switch (type) {
            case "confirm":
                btns=[
                    <Button type="primary" key="1" confirm={close}>确定</Button>,
                    <Button key="2" confirm={close}>取消</Button>
                ]
                break;
        
            case "danger":
                btns=[
                    <Button type="danger" key="1" confirm={close}>删除</Button>,
                    <Button key="2" confirm={close}>取消</Button>
                ]
                break;
            case"info":
                btns=[
                    <Button type="info" key="1" confirm={close}>我知道了</Button>,
                ]
                break;
        }
        return btns
    }
    let close=()=>{
        show()
    }
    let closeModal=(e)=>{
        if(e.target.dataset.self){
            show()
        }
    }
    return (
        <div className="ml-layer" style={{display:(isShow?'block':'none')}} data-self="layer" onClick={closeModal}>
            <div className="ml-modal">
                <header>
                    <div>
                        <div>{title}</div>
                        <div onClick={close}>{closable && "x"}</div>
                    </div>
                </header>
                <main>{children}</main>
                <footer>
                    {renderFooter()}
                </footer>
            </div>
        </div>
    )
}
Modal.propTypes={
    title:PropTypes.string,
    closable:PropTypes.bool,
    type:PropTypes.oneOf(["confirm","danger","info"]),
    isShow:PropTypes.bool,
    show:PropTypes.func,
}
Modal.defaultProps={
    title:"默认标题",
    closable:false,
    type:"info",
    isShow:"flase",
    show:()=>{},
}
function PageA (){
    const [isShow,setIsShow]= useState(false)
    console.log();
    let show =()=>{
        setIsShow(!isShow)
    }
    return(
        <div>
            <button onClick={show}>弹出层</button>
            <Modal title={'添加用户'} closable isShow={isShow} type="danger" show={show}>
                <div>
                    <input type="text" />
                    <div>你确定要添加用户嘛？</div>
                </div>
            </Modal>
        </div>

    )
}
export default PageA